Search Bars

hr.icon

検索バーでは、フィールドにテキストを入力することで、大量の値のコレクションから検索することができます。

検索バーは、単独で表示することも、ナビゲーションバーやコンテンツビューの中に表示することもできます。

ナビゲーションバーに表示する場合、検索バーをナビゲーションバーに固定して常にアクセスできるようにしたり、ユーザーが下にスワイプして表示されるまで折りたたんでおいたりすることができます。

https://gyazo.com/4dcf780562513b110f7f93bf49174f5a

検索を実装するために、テキストフィールドの代わりに検索バーを使用します。

テキストフィールドは、人々が期待する標準的な検索バーの外観を持っていません。

クリアボタンを有効にする。

ほとんどの検索バーには、フィールドの内容を消去する「クリア」ボタンがあります。

https://gyazo.com/fed164ad492f634925be6158f2908a37

適切な場合は、Cancelボタンを有効にします。

ほとんどの専用検索バーには、検索を即座に終了させるCancelボタンがあります。

https://gyazo.com/37cf8ed10edb3379141f0facf15a197c

必要であれば、検索バーでヒントや文脈を提供する。

検索バーのフィールドには、「服、靴、アクセサリーを検索」または単に「検索」のようなプレースホルダーテキストを入れて、検索対象のコンテキストを思い出させることができます。

また、検索バーの真上に、適切な句読点を用いた簡潔な1行のプロンプトを表示し、ガイダンスを提供することもできます。

https://gyazo.com/a0b0fc603b4a7e734a81627807859bc9

Stocksでは、会社名や証券記号を入力できることを知らせるプロンプトを使用しています。

https://gyazo.com/3f2a1bfdca32fce73a7193a43d5ac4f9

検索バーの下に役立つショートカットやその他のコンテンツを提供することを検討する。

検索バーの下を利用して、ユーザーがより早くコンテンツにたどり着けるようにしましょう。

例えば、Safariでは、検索フィールドをタップするとすぐにブックマークが表示されます。

選択すれば、検索キーワードを入力しなくても、そのブックマークにすぐにアクセスできます。

Stocksは、検索フィールドに文字を入力すると、検索結果の一覧が表示されます。

もう文字を入力することなく、いつでもひとつをタップできます。

Scope Bars

検索バーにスコープバーを追加することで、検索範囲を絞り込むことができます。

https://gyazo.com/556cea2cf219ed6439265e836a95caa3

スコープバーよりも検索結果を良くすることを優先する。

スコープバーは、検索するカテゴリーが明確に定義されている場合に有効です。

しかし、検索結果を良くすることが一番なので、スコープをつける必要は必ずしもない。